<template>
	<HomeLayout :currentFooter="currentFooter" @back="activeId=1">
		<view class="home-index">
			<view class="pool">
				<Home v-show="activeId===1"></Home>
				<Mine v-show="activeId===2"></Mine>
			</view>
			<view class="footer">
				<view class="list" v-for="item in footerList" :key="item.id" @click="clickFooter(item)">
					<template v-if="item.id===1">
						<image v-show="item.id!==activeId" src="../../assets/home-icon/home.png" mode="widthFix">
						</image>
						<image v-show="item.id===activeId" src="../../assets/home-icon/home-active.png" mode="widthFix">
						</image>
					</template>
					<template v-if="item.id===2">
						<image v-show="item.id!==activeId" src="../../assets/home-icon/mine.png" mode="widthFix">
						</image>
						<image v-show="item.id===activeId" src="../../assets/home-icon/mine-active.png" mode="widthFix">
						</image>
					</template>
					<view class="text">{{item.title}}</view>
				</view>
			</view>
		</view>
	</HomeLayout>
</template>

<script>
	import HomeLayout from "./home-layout.vue"
	import Home from "./home.vue"
	import Mine from "./mine.vue"
	export default {
		components: {
			HomeLayout,
			Home,
			Mine,
		},
		data() {
			return {
				footerList: [{
						title: "首页",
						id: 1,
					},
					{
						title: "我的",
						id: 2,
					},
				],
				activeId: 1,
			}
		},
		computed: {
			currentFooter() {
				return this.footerList.find(item => item.id === this.activeId)
			},
		},
		onLoad() {

		},
		methods: {
			clickFooter(item) {
				this.activeId = item.id
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home-index {
		height: 100%;
		display: flex;
		flex-direction: column;

		.pool {
			height: 1px;
			flex-grow: 1;
			background: #F4F4F4;
		}

		.footer {
			display: flex;
			align-items: center;
			height: 98rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.list {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
				line-height: 23rpx;
				font-style: normal;
				text-transform: none;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
</style>